<template>
    <div class="Popup">
        <van-popup v-model="isShow">
            <div class="popup-context-box flex">
                <div class="popup-context flex">是否{{ context }}</div>
                <div class="popup-btn-box">
                    <div class="popup-btn flex">
                        <div class="popup-btn-cancel" @click="goToLogin(false)">
                            <span>取消</span>
                        </div>
                        <div class="popup-btn-sure" @click="goToLogin(true)">
                            <span>确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    props: ['context'],
    data() {
        return {
            isShow: this.$store.state.Popup.isPopupShow
        }
    },
    methods: {
        goToLogin(bool) {
            this.$store.commit('Popup/showPopup', false)
            if(!bool) return
            localStorage.removeItem("token")
            this.$router.push('/login')
        }
    }
}
</script>
 
<style lang="less" scoped>
.van-popup {
    border-radius: 20px;
    .popup-context-box {
        width: 400px;
        height: 300px;
        background-color: #fff;
        flex-direction: column;
        .popup-context {
            height: 200px;
            justify-content: center;
            align-items: center;
        }
        .popup-btn {
            height: 100px;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #ccc;
            div {
                width: 50%;
                text-align: center;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                &.popup-btn-sure {
                    border-left: 1px solid #ccc;
                    color: #2d5bf1;
                }
            }
        }
    }
}
</style>